<template>
  <div class="search">
    <!-- 搜索框 -->
    <van-search v-model="keyWord" placeholder="请输入搜索关键词" />
    <!-- 热词搜索 -->
    <div v-if="!isShow">
      <div class="hotMusic">
        <p>热歌搜索</p>
      </div>
      <!-- 热搜关检词词列表 -->
      <ul class="hotKeyword">
        <li 
          v-for="(item, index) in hotMusicList" 
          :key="index"
          @click="handleKeyword(item.first)"  
        >{{ item.first }}</li>
      </ul>
    </div>
    <!-- 搜索歌单结果 -->
    <div class="hotMusic" v-if="isShow">
      <p>最佳匹配</p>
      <van-cell-group>
      <van-cell
        @click="$router.push({
          path: `/comment?id=${item.id}`
        })"
        v-for="item in musicList" 
        :key="item.id" 
        :title="item.name" 
        :label="item.ar[0].name" 
        center
        >
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-icon @click="play(item.id)" name="play-circle-o" class="search-icon" />
        </template>
      </van-cell>
    </van-cell-group>
    </div>
  </div>
</template>

<script>
import { hotKeyword, hotKeyWordResult } from '@/api/search.js'
export default {
  name: 'Search',
  data() {
    return {
      // 输入框值
      keyWord: '',
      // 热搜关键词
      hotMusicList: [],
      // 搜索出来的歌单
      musicList: [],
      // 是否隐藏搜索框或歌单
      isShow: false,
      // 定时器的唯一标识
      timer: null,
      // 标识（用来控制是需要防抖还是不需要防抖）
      flag: true
    }
  },
  created() {
    this.loadHotKeyword()
  },
  methods: {
    async loadHotKeyword() {
      const { data } = await hotKeyword()
      if (data.code === 200) {
        this.hotMusicList = data.result.hots
      } else {
        console.log('获取热词失败！')
      }
    },
    // 点击热搜关键字
    handleKeyword(name) {
      this.keyWord = name
      this.flag = false
      if (!this.flag) {
        hotKeyWordResult(1, this.keyWord).then(res => {
          if (res.data.code === 200) {
            this.musicList = res.data.result.songs
          } else {
            console.log('获取歌单数据失败！')
          }
        })
      }
    },
    play(id) {
      console.log('id: ',id)
      console.log(this.$route)
      this.$router.push({
        path: `/play?id=${id}`,
      })
    }
  },
  watch: {
    // 监听keyWord的变化
    async keyWord(newValue, oldvalue) {
      // 如果没有值
      if (!newValue) {
        console.log('输入框没有内容')
        this.isShow = false // 隐藏歌单
      } else {
        this.isShow = true
        this.flag = true
        if (this.flag) {
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            hotKeyWordResult(1, this.keyWord).then(res => {
              if (res.data.code === 200) {
                this.musicList = res.data.result.songs
              } else {
                console.log('获取歌单数据失败！')
              }
            })
          }, 1000)
        }
        
      }
    }
  }
  // 防抖：n秒后，执行最后一次（补充：函数在n秒内，再次执行，重新计时）
  // 节流：间隔n秒，执行一次代码
}
</script>

<style lang="less" scoped>
.search {
  margin-top:15px;

  .hotMusic {
    padding: 5px 10px;

    p {
      font-size: 20px;
      color:#747474;
    }
  }

  .hotKeyword {
    padding: 10px 25px;

    li {
      display:inline-block;
      color: #353535;
      font-size: 13px;
      padding: 7px 15px;
      border: 1px solid red;
      margin: 0 5px;
      border-radius:20px;
      margin-bottom:10px;
    }
  }

  .search-icon {
    font-size: 30px;
    line-height: inherit;
  }
}
</style>